.neo-code-live-preview {
    height                    : 400px;
    margin-bottom             : 2em;
    transition-duration       : .3s;
    transition-property       : height, left, top, width;
    transition-timing-function: ease-out;

    .live-preview-container {
        border-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
        box-shadow   : rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
        overflow     : hidden;

        .neo-tab-header-toolbar {
            background-color       : var(--sem-color-surface-neutral-default);
            border                 : 1px solid #e6e6e6;
            border-top-left-radius : calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
            border-top-right-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
            padding                : var(--cmp-tab-strip-height);
        }

        .neo-tab-strip {
            margin-top: calc(var(--cmp-tab-strip-height) * (-1) - 1px);
        }

        .neo-tab-body-container {
            background-color          : transparent;
            border                    : 1px solid #e6e6e6;
            border-bottom-left-radius : calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
            border-bottom-right-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
            border-top                : 0;
        }
    }
}
